<template>
    <div id="data-statistics">
        <h3 class="data-statistics-title">数据报表</h3>
        <div class="echarts" ref="myEcharts"></div>
    </div>
</template>

<script>
import echarts from "echarts";
import { getEchartsOption } from "../../config/data";
export default {
    name: "dataReport",
    data() {
        return {
            echarts,
            options: {
                title: {
                    // text: "用户来源",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#E9EEF3",
                        },
                    },
                },
                // grid: {
                //     left: "3%",
                //     right: "4%",
                //     bottom: "3%",
                //     containLabel: true,
                // },
                xAxis: [
                    {
                        boundaryGap: false,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
            },
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        async init() {
            let myEcharts = this.echarts.init(this.$refs.myEcharts);
            let result = await getEchartsOption();
            for (const key in result.data.option) {
                this.options[key] = result.data.option[key]
            }
            myEcharts.setOption(this.options)
        },
    },
};
</script>

<style scoped>
#data-statistics {
    height: 100%;
}
.data-statistics-title {
    height: 50px;
    line-height: 50px;
}
.echarts {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 50px);
    transform: translateX(-30px);
}
</style>